<template>
  <div id="app">
    <top-header> {{ this.$store.state.headerTitile }}</top-header>
	<keep-alive>		
		<router-view/>
	</keep-alive>
	<div class="footer">
		<router-link v-for="(item,index) in dmyList" :to="item.path" tag="div">
			<i>{{ item.iconDay }}</i>
			<p>{{ item.icontext }}</p>
		</router-link>
	</div>
  </div>
</template>

<script>
	import TopHeader from './components/TopHeader.vue'
	
	export default{
		data(){
			return {
				dmyList: null
			}
		},
		components:{
			TopHeader
		},
		created(){
			this.dmyList = this.$store.state.dmyList
			// console.log(this.dmyList)
		},
		watch: {  
			$route: {   //监听路由的变化
				handler: function(val, oldVal){
					var routerName = val.name
					// console.log(routerName)
					this.$store.commit('setHearTitile',routerName)
					this.$store.commit('setPlaceholder',routerName)
				},
				// 深度观察监听
				deep: true
			}
		},
	}
</script>

<style lang="less">
	.container{
		padding-top: .88rem;
		padding-bottom: .44rem;
		box-sizing: border-box;
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: .44rem;
		display: flex;
		text-align: center;
		border-top: .8px solid #ccc;
		div{
			width: 33.33%;
			margin-top: .02rem;
			i{
				display: block;
				width: .24rem;
				height: .24rem;
				background-color: #E7EAED;
				border-radius: 50%;
				margin: 0 auto;
				font-size: .16rem;
			}
			p{
				font-size: .16rem;
			}
		}
	}
	.router-link-active{
		color: #ed4040;
	}

</style>
